<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="../Stats.js" data-ke-src="../Stats.js"></script>
    <script src="../OBJLoader.js"></script>
</head>
<body>
    <script>
        const width = window.innerWidth
        const height = window.innerHeight
        var renderer,camera,scene
        var obj =null
        function init() {
            renderer = new THREE.WebGLRenderer({antialise:false})
            renderer.setSize(width,height)
            document.body.appendChild(renderer.domElement)

            camera = new THREE.PerspectiveCamera(45,width/height,0.1,2000)
            camera.position.set(0,0,400)
            camera.up.set(0,1,0)

            scene = new THREE.Scene()

            var ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 800 );
            scene.add( directionalLight );
        }
        function objMode() {
            //官方的
            const manager = new THREE.LoadingManager();
            manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
                console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
            };
            var texture;
            //图片的加载 1.单纯加载图片 然后添加到纹理中 2.直接将图片转成纹理
            //方式一:
            
            texture = new THREE.Texture()
            var imgLoader = new THREE.ImageLoader(manager)
            imgLoader.load("../temp/test3.jpg",
                function(image) {
                    texture.image = image
                    texture.wrapS = THREE.RepeatWrapping
                    texture.wrapT = THREE.RepeatWrapping
                    texture.needsUpdate = true
                }
            )
            //方式二:
            /*
            var imgLoader = new THREE.TextureLoader(manager)
            imgLoader.load("../temp/test3.png",
                function(temp) {
                    console.log("texture add")
                    texture = temp
                }
            )
            */
            //模型的加载
            var modeLoader = new THREE.OBJLoader(manager)
            modeLoader.load("mode/male02/male02.obj",
                function(temp) {
                    obj = temp
                    console.log("mode add")
                    obj.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                            console.log(child.name)
                            if (child.name == "mesh1.002_mesh1-geometry_orig_02_-_Defaul1noCu_orig_02_-_Defaul1noCu"
                            ||child.name == "mesh1.002_mesh1-geometry_FrontColorNoCullingID_orig_02_-_Defaul1noCu")
                                console.log("")
                            else 
                                child.material.map = texture;

                        }
                    } );
                    obj.position.y = obj.position.y - 80
                    scene.add(obj)
                }
            )

        }
        function animate() {
            requestAnimationFrame(animate)
            if(obj!=null)
                obj.rotation.y = obj.rotation.y+0.01
            renderer.render(scene,camera)
        }
        init()
        objMode()
        animate()

    </script>
</body>
</html>